<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>职位信息</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="/hadmin/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="/hadmin/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <!-- Data Tables -->
    <link href="/hadmin/css/plugins/bootstrap-table-n/bootstrap-table.min.css" rel="stylesheet">

    <!-- Sweet Alert -->
    <link href="/hadmin/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">

    <link href="/hadmin/css/animate.css" rel="stylesheet">
    <link href="/hadmin/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="/hadmin/css/plugins/toastr/toastr.min.css" rel="stylesheet">
</head>
<body>
<div >
    <div class="ibox-heading" id="dpm">
        <div class="row" v-show="showcon">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-content">
                        <form role="form" class="form-inline">
                            <div class="form-group">
                                <label for="con" class="sr-only">职位名称</label>
                                <input type="text" placeholder="请输入职位名称" id="con" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="st" >状态</label>
                                <select class="form-control" name="st" id="st" >
                                    <option value="">全部</option>
                                    <option value="0">正常</option>
                                    <option value="1">停用</option>
                                </select>
                            </div>


                            <button class="btn btn-white" type="button" id="ser"><i class="fa fa-search"></i>查询</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="ibox-content" >
        <div id="toolbar" class="btn-group">
            <button class="btn btn-info " type="button" data-toggle="modal" data-target="#addposition"><i class="fa fa-plus"></i>&nbsp;添加</button>
            <button class="btn btn-info " type="button" id="del"><i class="fa fa-trash"></i>&nbsp;删除</button>
            <button class="btn btn-primary " type="button" id="sea"><i class="fa fa-chrome"></i></button>
        </div>
        <div class="row">
            <table class="table table-striped table-bordered table-hover " id="editable">
            </table>
        </div>
    </div>


    <!--添加 -->
    <div class="modal fade" style="width: 90%"  id="addposition" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="width: 70%">
            <div class="modal-content" style="width: 70%">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">职位信息录入</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="ibox float-e-margins">
                                <div class="ibox-content">
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <form role="form" id="addform">
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label class="col-sm-3 control-label">职位名称：</label>
                                                        <div class="col-sm-9">
                                                            <input type="text" id="aname" name="name" required=""
                                                                   aria-required="true" class="form-control" placeholder="请输入职位名称">

                                                        </div>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="addbtn">提交</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

    <!--编辑 -->
    <div class="modal fade"  id="editposition" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="width: 90%">
            <div class="modal-content" style="width: 90%">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">员工信息编辑</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="ibox float-e-margins">
                                <div class="ibox-content">
                                    <div class="row">
                                        <div class="col-sm-12" id="editvue">
                                            <form role="form" id="editform">
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label for="pname" class="col-sm-3 control-label">职位名称：</label>
                                                        <div class="col-sm-9">
                                                            <input type="text" name="name" id="pname" required="" v-model="editformdata.name"
                                                                   aria-required="true" class="form-control" placeholder="请输入职位名称">

                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label for="peducation" class="col-sm-3 control-label">当前状态：</label>
                                                        <div class="col-sm-9">
                                                            <select class="form-control" id="peducation" name="status" v-model="editformdata.status">
                                                                <option value="true">正常</option>
                                                                <option value="false">停用</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="editbtn">提交</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

</div>

</body>
<!-- 全局js -->
<script src="/hadmin/js/jquery.min.js?v=2.1.4"></script>
<script src="/hadmin/js/bootstrap.min.js?v=3.3.6"></script>

<!-- 自定义js -->
<script src="/hadmin/js/content.js?v=1.0.0"></script>


<!-- Data Tables -->
<script src="/hadmin/js/plugins/bootstrap-table-n/bootstrap-table.min.js"></script>
<script src="/hadmin/js/plugins/bootstrap-table-n/locale/bootstrap-table-zh-CN.min.js"></script>

<!-- layerDate plugin javascript -->
<script src="/hadmin/js/plugins/layer/laydate/laydate.js"></script>

<!-- jQuery Validation plugin javascript-->
<script src="/hadmin/js/plugins/validate/jquery.validate.min.js"></script>
<script src="/hadmin/js/plugins/validate/messages_zh.min.js"></script>

<script src="/hadmin/js/demo/form-validate-demo.js"></script>

<!-- Toastr script -->
<script src="/hadmin/js/plugins/toastr/toastr.min.js"></script>

<!-- Sweet alert -->
<script src="/hadmin/js/plugins/sweetalert/sweetalert.min.js"></script>


<script src="/vue/vue.js"></script>
<script src="/vue/axios.min.js"></script>
<script src="/vue/axios-tools.js"></script>

<script>

    //表单转化
    var transformToJson = function(formData){
        var obj={}
        for (var i in formData) {
            /*[{"name":"user","value":"hpc"},{"name":"pwd","value":"123"},{"name":"sex","value":"M"},{"name":"age","value":"100"},{"name":"phone","value":"13011112222"},{"name":"email","value":"xxx@xxx.com"}]
            */
            //下标为的i的name做为json对象的key，下标为的i的value做为json对象的value
            obj[formData[i].name]=formData[i]['value'];
        }
        return obj;
    }

    $(function () {
        //1.初始化Table
        var oTable = new TableInit();
        oTable.Init();

        $('#del').click(function () {
            var a= $('#editable').bootstrapTable('getSelections');
            if(a.length <= 0){
                return false
            }
            console.info(a)
            swal({
                title: "您确定要删除记录吗",
                text: "删除后将难以恢复，请谨慎操作！",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "删除",
                closeOnConfirm: false
            }, function () {
                axiosconfig({
                    url: '/personnel/sys/positionlist',
                    method: 'delete',
                    data: a,
                    succ: function (back) {
                        swal("删除成功！", "您已经删除了信息。", "success");
                    }
                })

            });
        })


        var dpm = new Vue({
            el: '#dpm',
            data: {
                showcon: false
            },
            methods: {
                searchc(){
                    this.showcon = !this.showcon
                }
            }
        })

        $('#sea').click(function () {
            dpm.searchc()
        })

        $('#ser').click(function () {
            console.info('----')
            oTable.Init();
        })


        var addvalidate = $('#addform').validate()
        $('#addbtn').click(function () {
            if(addvalidate.form()){
                //提交表单
                let positionform = $('#addform').serializeArray()
                console.info(transformToJson(positionform))
                axiosconfig({
                    url: '/personnel/sys/position',
                    method: 'post',
                    data: transformToJson(positionform),
                    succ: function (back) {
                     //   console.info(back)
                        $('#addposition').modal('hide')
                    }
                })
            }
        })

        var editvalidate = $('#editform').validate()
        $('#editbtn').click(function () {
            if(editvalidate.form()){
                //提交表单
                let positionform = editApp.editformdata
                console.info(positionform)
              //  return false
                axiosconfig({
                    url: '/personnel/sys/position',
                    method: 'put',
                    data: positionform,
                    succ: function (back) {
                        //   console.info(back)
                        $('#editposition').modal('hide')
                    }
                })
            }
        })

    })

    var editApp = new Vue({
        el: '#editvue',
        data: {
            editformdata: {
                id: '',
                name: '',
                status: true,
                createTime: '',
                createUser: '',
                lastUpdateTime: '',
                lastUpdateUser: '',
                deleteTime: '',
                deleteUser: '',
                createUserName: '',
                lastUpdateUserName: '',
                deleteUserName: ''
            }
        }
    })

    var TableInit = function () {
        var oTableInit = new Object();
        //初始化Table
        oTableInit.Init = function () {
            $('#editable').bootstrapTable('destroy');
            $('#editable').bootstrapTable({
                url: '/personnel/sys/positionofpage',         //请求后台的URL（*）
                method: 'post',                      //请求方式（*）
                toolbar: '#toolbar',                //工具按钮用哪个容器
                striped: true,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true,                   //是否显示分页（*）
                sortable: false,                     //是否启用排序
                sortOrder: "asc",                   //排序方式
                queryParams: oTableInit.queryParams,//传递参数（*）
                sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                pageNumber:1,                       //初始化加载第一页，默认第一页
                pageSize: 10,                       //每页的记录行数（*）
                pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
                search: false,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                strictSearch: true,
                showColumns: true,                  //是否显示所有的列
                showRefresh: true,                  //是否显示刷新按钮
                minimumCountColumns: 1,             //最少允许的列数
                clickToSelect: true,                //是否启用点击选中行
         //       height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId: "id",                     //每一行的唯一标识，一般为主键列
                showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
                cardView: false,                    //是否显示详细视图
                detailView: false,                   //是否显示父子表
                columns: [{
                    checkbox: true
                }, {
                    field: 'name',
                    title: '职位名称'
                }, {
                    field: 'statusName',
                    title: '状态',
                    formatter: function (value, row, index) {
                        if(row.status==null || row.status){
                            return '<span class="label label-info">正常</span>'
                        }else{
                            return '<span class="label label-danger">停用</span>'
                        }
                    }
                },{
                    field: 'createTime',
                    title: '创建时间',
                    visible: false
                },{
                    field: 'createUserName',
                    title: '创建人',
                    visible: false
                },{
                    field: 'lastUpdateTime',
                    title: '最近更新时间',
                    visible: false
                },{
                    field: 'lastUpdateUserName',
                    title: '最近更新人',
                    visible: false
                },{
                    field: 'button',
                    title: '操作',
                    events: oTableInit.oprateEvent,
                    formatter: oTableInit.btnformatter,
                    width: 150
                }]
            });
        };

        //得到查询的参数
        oTableInit.queryParams = function (params) {
            console.info(params)
            var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                limit: params.limit,   //页面大小
                offset: params.offset,  //开始条数码
                searchCon: {
                    status: $('#st').val(),
                    pname: $('#con').val()
                }
            };
            return temp;
        };
        oTableInit.btnformatter = function (value, row, index) {
            return [
                '<button id="rowEdit" class="btn btn-xs btn-info " type="button"><i class="fa fa-pencil"></i>&nbsp;编辑</button> &nbsp;&nbsp;',
                '<button id="rowDel" class="btn btn-xs btn-danger " type="button"><i class="fa fa-trash"></i>&nbsp;删除</button>',
            ].join("")
        }
        oTableInit.oprateEvent = {
            'click #rowEdit': function (e, value, row, index) {
                $('#editposition').modal('show')
                Object.assign(editApp.editformdata, row)

            },
            'click #rowDel': function (e, value, row, index) {
                swal({
                    title: "您确定要删除这条记录吗",
                    text: "删除后将难以恢复，请谨慎操作！",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "删除",
                    closeOnConfirm: false
                }, function () {
                    axiosconfig({
                        url: '/personnel/sys/position',
                        method: 'delete',
                        data: row,
                        succ: function (back) {
                            swal("删除成功！", "您已经删除了这条信息。", "success");
                        }
                    })

                });
            }
        }
        return oTableInit;
    };


</script>
</html>